<template>
  <div class="index">   
    <!-- 使用swiper组件 :options是给组件传参的 右边是变量对象 ，-->
    <swiper ref="mySwiper" :options="swiperOptions" class="swiper">
        <swiper-slide v-for="item in lunbos" :key="item.id">
        <img :src="item.s_photos[0].path"/>
        </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>

    <!-- 使用商品分类的路由组件 给组件动态绑定(传参)了id 和 item（变量为classify）-->
    <ClassifyList v-for="item in classifies"
    :key="item.id"
    :id="item.id"
    :classify="item"
    />

    <!-- 对应的每个分类和对应的商品应该是一个整体 -->
    <!-- 在标签内遍历请求回来的分类数组，里面的数据都是对象 对象里面的name属性是分类文字-->
    <!-- <div v-for="item in classifies" :key="item.id" class="product">
      对应的分类标题
      <div class="classify">
      <h1>{{item.name}}</h1>
      <span>查看更多</span>
      </div> -->

      <!-- 分类对应的商品 -->
      <!-- 遍历请求回来的商品数组，里面是单个对象 里面有图片地址，根据层级，动态绑定src   name属性是商品名  price属性是单价-->
      <!-- <div v-for="item in phoneGoods" :key="item.id" class="good">
        <img :src="item.s_goods_photos[0].path" alt="">
        <h3>{{item.name}}</h3>
        <h4>{{item.price}}</h4>
        <button>查看详情</button>
        <button>加入购物车</button>
      </div> -->
      
    <!-- </div> -->

    <!-- 首页返回顶部按钮组件 -->
    <el-backtop  :bottom="100">
    <div
      style="{
        height: 100%;
        width: 100%;
        background-color: #333333;
        box-shadow: 0 0 16px rgba(0,0,0, .17);
        text-align: center;
        line-height: 40px;
        color: #fff;
        border-radius: 50%;
        font-size: 16px;
      }"
    >
      UP
    </div>
  </el-backtop>

  </div>
</template>

<script>
//引入商品分类组件 v-for出来
import ClassifyList from "@/components/ClassifyList.vue";

//引入swiper组件
import {Swiper,SwiperSlide,directive} from"vue-awesome-swiper";

//引入swiper样式
import "swiper/css/swiper.css";
import { getLunbo,getGoods,getClassify}from "../assets/request.js";

export default{

    name: "Index",

    data(){
      return {
        //配置swiper
        swiperOptions:{
          //立方体切换效果
          effect:"fade",
          autoplay:true,
          //循环模式
          loop:true,
          //分页器
          pagination:{
            el:".swiper-pagination",
          },
        },

        //准备几个空数组（初始化），存放接下来请求回来的数据

        //存放轮播图的数组
        lunbos:[],

        //存放分类的数组
        classifies:[],

     
      };
    },

    //注册组件
    components: { 
      Swiper,
      SwiperSlide,
      ClassifyList
    },

    //swiper组件标配默认设置
    directives:{
      swiper:directive,
    },

    //生命周期函数，加了async 标志为异步函数，里面可以使用await请求数据
    async mounted(){

      //发送ajax请求---轮播图数据
      let lunboRes = await getLunbo({
        //填写自己项目的id，请求回来数据赋值给一个变量
        project_id:267,
      });
      console.log(lunboRes);
      //从变量里面提取数据赋值给当前页面的空数组lunbos,数组里面有数据之后，在组件中遍历数组里的图片。.data.result 是后台定的
      this.lunbos = lunboRes.data.result;


      // //请求商品分类的数据
      let ClassifyRes = await getClassify({
        project_id:267,
      });
      // //从请求回来的数据中拿到商品分类数据 赋值给当前页面的空数组classifies
      this.classifies = ClassifyRes.data.result;
      // console.log(classifies);


    }

}

</script>

<style lang='scss' scoped>

.index{
  background-color: gainsboro;
}
.swiper{
  width: 1400px;
  height: 570px;

  img{
    width: 100%;
  }
}


</style>
